<template>
   <div>
       <!-- 图片背景 -->
  
      <img  :src="ArticleDetail.createdCover"  class="cover">

      <!-- 内容 -->
      <div class="contentBox flex"> 
            <div class="content flex">
               <h2 class="title">{{ArticleDetail.title}}</h2>
                <!-- <div class="detail flex">
                      <div class="flex"><img src="@/assets/default/information/Hot.png" class="icon"> {{ArticleDetail.hot || 0 }}热度</div>
                      <div class="flex"><img src="@/assets/default/information/Like.png" class="icon"> {{ArticleDetail.likecount || 0 }}点赞</div>
                     <div class="flex"><img src="@/assets/default/information/Collect.png" class="icon"> {{ArticleDetail.collectcount || 0 }}收藏</div>
                </div> -->
            </div>
      </div>
   
   </div>
</template>
<script>
import { mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('ArticleDetail',['ArticleDetail'])
     }
  }
</script>
<style scoped lang='less'>
.cover{
   width: 100%;height: 100%;
   position: absolute;
   z-index: 0;top: 0;
   object-fit: cover;
   background: none;
   border-radius: 0;
}
.contentBox{
   width: 100%;height: 100%;
   position: relative;
   z-index: 10;
   background: rgba(0, 0, 0, 0.3);

   .content{
      width: 80%;
      text-align: center;
   }
   .title{
       text-align: center;
      font-size: 50px;
      font-weight: 600;
      color: white;
   }
   .detail{
      width: 100%;
      margin-top: 50px;

      color: white;
      font-size: 18px;

      .icon{
         width: 20px;height: 20px;
         margin: 5px;
      }
   }
}
</style>